<template>
  <grid-layout
    :layout="layout"
    :col-num="colNum"
    :row-height="rowHeight"
    :is-draggable="false"
    :is-resizable="false"
    :vertical-compact="verticalCompat"
    :margin="margin"
    :use-css-transforms="!disableCssTransforms"
    class="grid-box"
  >
    <grid-item
      v-for="item in layout"
      v-bind="item"
      :key="item.i"
      class="grid-item"
    >
      <component :is="runtime.placeholder" :template="item.el" />
    </grid-item>
  </grid-layout>
</template>

<style lang="scss" scoped src="./common.scss"></style>

<script>
import Vue from 'vue';
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  name: 'GridBox',
  inject: ['runtime'],
  components: {
    GridLayout,
    GridItem,
  },
  props: {
    colNum: {
      type: Number,
      default: 12,
    },
    rowHeight: {
      type: Number,
      default: 30,
    },
    margin: {
      type: Array,
      default() {
        return [10, 10];
      },
    },
    verticalCompat: Boolean,
    disableCssTransforms: Boolean,
  },
  computed: {
    layout() {
      const $vm = this;
      return (this.runtime.node.template.elements || []).map((el) =>
        Vue.observable({
          x: 0,
          y: 0,
          w: 1,
          h: 1,
          i: el.name,
          el,
        }),
      );
    },
  },
};
</script>
